<template>
    <div>
        <ul class="nav">
          <li
            class="nav-li border-right"
            v-for="item of nav"
            :key="item.id"
          ><a class="nav-a border-rightbottom" href="javascript:;">{{ item.navName }}</a></li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'HomeNav',
  props: {
    nav:  Array
  }
}
</script>

<style lang="stylus" scoped>
  .nav
    height: 0
    padding-bottom: 104px
    background-color: #0083c4
    .nav-li
      width: 25%
      float: left
    .nav-li
      &:nth-of-type(4n)
      border-right::before,
      border-right::after
        border-right: none
      .nav-a
        display: block
        color: #fff
        text-align: center
        font-size: 24px
        line-height: 54px
        height: 54px
</style>
